<template>
  <div class="wrap">
    <el-form :model="item" label-position="right" :rules="rules" ref="form" class="form">
      <el-form-item :label="$t('configLazyLoad.businessConfig.title')" class="star-title" prop="subTitle">
        <el-input v-model.trim="item.subTitle" maxlength="50"></el-input>
      </el-form-item>
      <el-form-item>
        <div v-for="(one, index) in item.subs" :key="index" class="star-item">
          <el-rate :max="5 - index" class="rate" :value="5 - index" disabled></el-rate>
          <el-input v-model.trim="one.name" class="input" :maxlength="10"></el-input>
          <div class="input-btn">
            <input-button
              v-for="(des, num) in one.tags"
              :key="num"
              :tagName="des"
              :close="close(index, num)"
              :edit="edit(index, num)"
            >
            </input-button>
            <input-button type="button" :add="add(index)"></input-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import inputButton from './inputButton'
export default {
  name: 'index',
  props: {
    item: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      rules: {
        subTitle: [{ required: true, message: this.$t('validate.required'), trigger: 'blur' }]
      }
    }
  },
  components: {
    inputButton
  },
  methods: {
    add(index) {
      let self = this
      return (name) => {
        if (self.item.subs[index].tags.length === 5) {
          return this.$message.error(this.$t('configLazyLoad.businessConfig.labelTip'))
        }
        if (self.item.subs[index].tags.indexOf(name) !== -1) {
          return this.$message.error(this.$t('configLazyLoad.businessConfig.repeatLabelTip'))
        }
        self.item.subs[index].tags.push(name)
      }
    },
    submit() {
      let isValid = true
      this.$refs.form.validate((valid) => {
        isValid = valid
      })
      isValid &&
        this.item.subs.forEach((item) => {
          if (!item.name) {
            isValid = false
            this.$message.error(this.$t('configLazyLoad.businessConfig.starDescTip'))
          }
        })
      return isValid
    },
    close(index, num) {
      let self = this
      return function () {
        this.$confirm(this.$t('configLazyLoad.businessConfig.deleteTip'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        })
          .then(() => {
            self.item.subs[index].tags.splice(num, 1)
          })
          .catch(() => {})
      }
    },
    edit(index, num) {
      let self = this
      return function (name) {
        // 内容没有被修改直接return
        if (self.item.subs[index].tags[num] === name) {
          return
        }
        // 内容重复return
        if (self.item.subs[index].tags.indexOf(name) !== -1) {
          return this.$message.error(this.$t('configLazyLoad.businessConfig.repeatLabelTip'))
        }
        self.item.subs[index].tags.splice(num, 1, name)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.star-title {
  display: flex;
  margin-bottom: 16px
  /deep/label {
    width 60px
  }
  /deep/.el-form-item__content {
    flex: 1
  }
}
.wrap
  margin-top: 12px
.star-item
  margin-bottom 5px
  display flex
  .rate
    flex-grow 0
    flex-shrink 0
    width 125px
    padding-top 6px
  .input
    flex-grow 0
    flex-shrink 0
    width 180px
    margin 0 20px
  .input-btn
    flex-grow 1
    flex-shrink 1
</style>
